<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="直播"></NavBarVue>
		<view class="px-30 flex-1 flex flex-col overflow-hidden">
			<view class="bg-gradient-to-b from-[#D0EEFF] to-[#FFFFFF] rounded-lg p-20">
				<ImageBoxVue src="/static/live/live_title.png" width="132rpx" height="39rpx"></ImageBoxVue>
				<scroll-view scroll-x class="mt-20">
					<view class="flex">
						<UserVue class="mr-20" v-for="e,i in userList" :key="i" :val="e" @click="onPath(e.id)"></UserVue>
					</view>
				</scroll-view>
			</view>
		
			<view class="mt-30 flex-1 flex flex-col overflow-hidden">
				<view class="flex justify-between items-center">
					<!-- <ImageBoxVue src="/static/live/live_title1.png" width="132rpx" height="43rpx"></ImageBoxVue> -->
					<text class="font-bold text-sm" v-if="sts == 0">正在直播</text>
					<text class="font-bold text-sm" v-else>语音单独陪伴</text>
				</view>
				<view class="flex-1 w-full overflow-hidden mt-20">
					<scroll-view scroll-y class="h-full" @scrolltolower="onReachBottom">
						<view class="flex flex-wrap justify-between" v-if="sts == 0">
							<LiveBoxVue v-for="e,i in liveData" :key="i" :val="e"></LiveBoxVue>
						</view>
						<view class="" v-else>
							<microphoneVue v-for="e,i in liveData" :index="i" :key="i" :val="e"></microphoneVue>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
	} from "@dcloudio/uni-app"
	import UserVue from '@/components/User.vue'
	import LiveBoxVue from '../tabbar/components/live/LiveBox.vue';
	import microphoneVue from "../live/components/microphone.vue"
	import liveApi from '@/apis/apiList/liveApi';
	const userList = ref([])
	const sts = ref(0)
	const page = ref(1)
	const loading = ref('more')
	const liveData = ref([])
	onLoad((option) => {
		sts.value = option.sts
		getisrecAnchorlist()
		getList()
	})

	onShow(() => {
	})
	
	const onReachBottom = () => {
		if (loading.value != 'more') {
			return
		}
		page.value++
		getList()
	}
	
	const getisrecAnchorlist = () => {
		liveApi.getisrecAnchorlist().then(res => {
			userList.value = res.data
		})
	}
	
	const getList = () => {
		if (sts.value == 0) {
			liveApi.getLiveRoomlist({
				sts: sts.value,
				page: page.value,
				limit: 10
			}).then(res => {
				if (page.value == 1) {
					liveData.value = res.data
				}else {
					liveData.value = [...liveData.value, ...res.data]
				}
				if (res.data.length == 0) {
					loading.value = 'noMore'
				}else {
					loading.value = 'more'
				}
			})
		}else {
			liveApi.getAnchorlistAtexamine({
				examine: "0",
				page: page.value,
				limit: 10
			}).then(res => {
				if (page.value == 1) {
					liveData.value = res.data
				}else {
					liveData.value = [...liveData.value, ...res.data]
				}
				if (res.data.length == 0) {
					loading.value = 'noMore'
				}else {
					loading.value = 'more'
				}
			})
		}
	}
	const onPath = (id) => {
		uni.navigateTo({
			url: `/pages/user/anchor?id=${id}`
		})
	}
</script>

<style>

</style>